import React, { Component } from 'react'
import "./index.css";
export default class Main extends Component {
    render() {
        //获取父级组件传入的 todos 数据
        let {todos} = this.props;
        return (
            <ul className="todo-main">
                {
                    todos.map(item => {
                        return <li key={item.id}>
                            <label>
                                <input type="checkbox" checked={item.done} onChange={this.change(item.id)}/>
                                <span>{item.title}</span>
                            </label>
                            <button onClick={this.deleteTodo(item.id)} className="btn btn-danger" style={{ display: item.done ? 'block' : 'none' }}>删除</button>
                        </li>
                    })
                }

                {todos.length === 0 && <div className="empty">空空如也</div>} 
            </ul>
        )
    }
    
    change = (id) => {
        return e => {
            //获取多选框在切换之后, 应该有的状态值
            let status = e.target.checked;
            //设置 状态的修改
            this.props.checkTodo(id, status);
        }
    }

    deleteTodo = (id) => {
        return () => {
            this.props.delete(id);
        }
    }
}
